<!-- 父组件与子组件之间的数据传输 -->

<!-- 引入vue框架 -->
<script src="./vue.js"></script>

<!-- 界面显示 -->
<div id="app">
    <prpet></prpet>
</div>

<!-- 自定义子组件模板 -->
<template id="chaild1">
    <div>
        <!-- 点击事件调用send方法 -->
        <button @click="send">发送</button>
        <!-- 文本框进行双向绑定msg -->
        <input type="text" v-model="msg">
    </div>
</template>

<!-- 脚本定义 -->
<script>
    //注册父组件
    Vue.component('prpet', {
        //父组件变量msg
        data() {
            return {
                msg: ''
            };
        },
        //引入子组件,组件当中 childfn 名字要给出父组件的方法名 prpetfn
        template: '<div><child @childfn="prpetfn"></child>' +
            "获取子组件的信息为：{{msg}}</div>",
        // 定义父组件的事件
        methods: {
            prpetfn(value) {
                this.msg = value;
            }
        }
    });

    //注册子组件
    Vue.component('child', {
        //子组件样式
        template: '#chaild1',
        //子组件定义的变量
        data() {
            return {
                msg: ''
            };
        },
        //子组件的方法
        methods: {
            send() {
                this.$emit('childfn', this.msg)
            }
        }
    })

    var vue = new Vue({
        el: '#app',
    })
</script>

<!-- 当前界面样式 -->
<style>

</style>